Creating DIV and SPAN Elements in Design View

A <DIV> element is used on an HTML page to enclose a block of HTML elements and apply CSS attributes to them. A <DIV> is a block element. Like a <P> paragraph, it occupies a rectangular area of the display, and can include CSS layout attributes. These attributes can be inserted directly into the markup for the <DIV> element, or can be referenced from a style sheet via a <CLASS> or <ID> attribute.

A <SPAN> is an inline element typically used to alter the style of a portion of a paragraph or <DIV>. For example, suppose you apply a CSS style attributes to a <DIV> to format all the text it contains in a certain size and color. Within this <DIV>, you can then enclose certain words within <SPAN> tags and apply further formatting, for example to give them special emphasis. A <SPAN>, unlike a <DIV>, flows with the text around it.

To create a <DIV> in Design View

1. Select the elements that you want to enclose within the <DIV>.

   A <DIV> may enclose text and other HTML elements inserted from the Toolbox or menus.

2. From the Insert menu, choose DIV.

To create a <SPAN> in Design View

1. Select the portion of the HTML document that you want to enclose in the <SPAN>.

   A <SPAN> may enclose text and other HTML elements inserted from the Toolbox or menus.

2. From the Insert menu, choose Span.

To add elements within a <DIV> or <SPAN>

1. In Design View, place the insertion point at the desired location within the <DIV> or <SPAN> element.

   Tip   To display graphic markers for <DIV> and <SPAN> elements in Design View, choose Details from the View menu.

2. Double-click the desired elements in the Toolbox to insert them at the current cursor location.